<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .serachBox {
            display: flex;
            flex-direction: column;
            width: 600px;
            margin: 0 auto;
            align-items: flex-start;
        }

        form {
            display: flex;
            width: 300px;

        }

        input {
            flex-grow: 1;
            height: 20px;
        }

        input:focus {
            outline: none;
        }

        .data {
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            width: 255px;
        }

        li {
            list-style: none;
            padding: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="serachBox">
        <form action="">
            <input type="text" class="input" name="search">
            <button>搜索</button>
        </form>
        <ul class="data"></ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>

        $(document).ready(function () {
            $("input").on('input', debounce(getKey(), 500));
        });

        function getKey() {
            return function () {
                let keyData = $('input[name="search"]').val();
                $.get("http://127.0.0.1:3000/server", keyData, function (data) {
                    $(".data").empty();
                    for (let i in data) {
                        if (typeof keyData == "undefined" || keyData == null || keyData == "") {
                            $(".data").empty();
                        } else {
                            $('.data').append('<li>' + data[i] + '</li>');
                        }
                    }
                });
            }
        }

        function debounce(func, delay) {
            var timeout;
            return function () {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(this, arguments);
                }, delay);
            }
        }
        ////
        /**
  * @desc 函数防抖
  * @param func 函数
  * @param wait 延迟执行毫秒数
  * @param immediate true 表立即执行，false 表非立即执行
  */
        // function debounce(func, wait, immediate) {
        //     let timeout;
        //     return function () {
        //         const context = this;
        //         const args = [...arguments];
        //         if (timeout) clearTimeout(timeout);
        //         if (immediate) {
        //             const callNow = !timeout;
        //             timeout = setTimeout(() => {
        //                 timeout = null;
        //             }, wait)
        //             if (callNow) func.apply(context, args)
        //         }
        //         else {
        //             timeout = setTimeout(() => {
        //                 func.apply(context, args)
        //             }, wait);
        //         }
        //     }
        // }

    </script>
</body>

</html>